<template>
    <div>
        <canvas id="c1" width="500px" height="500px"></canvas>
        <video src="/static/mov_bbb.mp4" controls></video>
        <img :src="imgs" alt="">
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgs: '13213'
            }
        },
        mounted() {
            let self = this
            window.onload = function() {
                let video = document.querySelector('video')
                console.log(video)
                video.play()
                let canvas = document.querySelector('canvas')
                let ctx = canvas.getContext('2d')
                let cacheCanvas = document.createElement('canvas')
                cacheCanvas.width = canvas.width * 2
                cacheCanvas.height = canvas.height * 2
                let cacheCtx = cacheCanvas.getContext('2d')
                setInterval(() => {
                    // alert('111')
                    cacheCtx.drawImage(video, 0, 0, cacheCanvas.width, cacheCanvas.height)
                    // alert(imgUrl)
                    let img = document.createElement('img')
                    self.imgs = cacheCanvas.toDataURL('image/jpeg')
                    // console.log('imgs', self.imgs)
                    // cacheCanvas.toBlob((blob) => {
                    //     let a = URL.createObjectURL(blob)
                    //     img.src = a
                    //     alert(a)
                    //     img.onload = () => {
                    //         ctx.drawImage(img, 0, 0)
                    //     }
                    // }, 'image/jpeg')
                    // img.onload = function () {
                    //     ctx.drawImage(img, 0, 0)
                    // }
                    // let imgUrl = cacheCanvas.toDataURL()
                    // img.src = imgUrl
                    // console.log('img', imgUrl)4
                    // cacheCanvas.toBlob((blob) => {
                    //     let newImg = document.createElement('img')
                    //     let url = URL.createObjectURL(blob)
                    //     newImg.onload = () => {
                    //         URL.revokeObjectURL(url)
                    //         ctx.drawImage(newImg, 0, 0)
                    //     }
                    //     newImg.src = url
                    //     console.log('url', url)
                    //     self.imgs = url
                    //     // alert(url)
                    // }, "image/jpeg")

                    // img.src = imgUrl
                    // self.imgs = imgUrl
                    // console.log(imgUrl)
                    // alert(imgUrl)
                }, 20)
            }
        }
    }
</script>